<#include "module/macro.ftl">
<@head title="${options.blog_title!'Anatole'}" keywords="${options.seo_keywords!'Anatole'}" description="${options.seo_desc!'Anatole'}"></@head>
<#-- 左半部分图标和版权信息 -->
<#--<#include "module/sidebar.ftl">-->
<#--<div class="main">-->
    <#--<#include "module/page-top.ftl">-->
    <#--<div class="autopagerize_page_element">-->
        <#-- 页面主体部分 -->
        <#--<div class="content">-->
            <#--<#include "module/post_entry.ftl">-->
        <#--</div>-->
    <#--</div>-->
<#--</div>-->
<!--轮播导航插件-->
<div id="myCarousel" class="carousel slide">
    <!--用列表绑定事件-->
    <ol class="carousel-indicators">
        <!--绑定事件	循环标记	被首选-->
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
    <!--用css样式将底下的选择器选中，图片居中，以此适应更大型的显示设备显示.carousel-inner img-->
    <div class="carousel-inner">
        <!--可以在下面的div里指定背景颜色用来填补图片大小造成的影响-->
        <div class="item active">
            <img class="main_slide" src="${options.background_one_pic!'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546750869068&di=edafc4fe7f8e15e6c1a96d781c03a796&imgtype=0&src=http%3A%2F%2Fimg.pptjia.com%2Fimage%2F20180117%2Ff4b76385a3ccdbac48893cc6418806d5.jpg'}" alt="描述">
            <div class="container">
                <div class="carousel-caption">
                    <h1>${options.title_one!'标题1'}</h1>
                    <p><#--<code>code：</code>-->${options.title_desc_one!'标题描述1'}</p>
                    <#--<p><a href="javascript:;" class="btn btn-info"><span class="glyphicon glyphicon-hand-right"></span>&nbsp;试一下</a></p>-->
                </div>
            </div>
        </div>
        <div class="item">
            <img class="main_slide" src="${options.background_two_pic!'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546750942096&di=7d4f127f7b166109b35c68ffd39c1f17&imgtype=0&src=http%3A%2F%2Fwww.miguyx.com%2Fwp-content%2Fuploads%2F2015%2F10%2F2015-10-1934.jpg'}" alt="描述">
            <div class="container">
                <div class="carousel-caption">
                    <h1>${options.title_two!'标题2'}</h1>
                    <p>${options.title_desc_two!'标题描述2'}</p>
                    <#--<p><a href="javascript:;" class="btn btn-info"><span class="glyphicon glyphicon-hand-right"></span>&nbsp;试一下</a></p>-->
                </div>
            </div>
        </div>
        <div class="item">
            <img class="main_slide" src="${options.background_three_pic!'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546750974303&di=b8614ee5be68fdc296b26c8fe8f34394&imgtype=0&src=http%3A%2F%2Fa4.topitme.com%2Fo%2F201101%2F03%2F12939857045446.jpg'}" alt="描述">
            <div class="container">
                <div class="carousel-caption">
                    <h1>${options.title_three!'标题3'}</h1>
                    <p>${options.title_desc_three!'标题描述3'}</p>
                    <#--<p><a href="javascript:;" class="btn btn-info"><span class="glyphicon glyphicon-hand-right"></span>&nbsp;试一下</a></p>-->
                </div>
            </div>
        </div>
        <div class="item">
            <img class="main_slide" src="${options.background_fore_pic!'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546751013258&di=df229bdadad9eb6eaa8685a37f65ff1d&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F0%2F56a0305f0bf29.jpg'}" alt="描述">
            <div class="container">
                <div class="carousel-caption">
                    <h1>${options.title_fore!'标题4'}</h1>
                    <p>${options.title_desc_fore!'标题描述4'}</p>
                    <#--<p><a href="javascript:;" class="btn btn-info"><span class="glyphicon glyphicon-hand-right"></span>&nbsp;试一下</a></p>-->
                </div>
            </div>
        </div>
    </div><!--绑定事件	上下分页	样式和位置	运用选择器.carousel-control将字体放大-->
    <a href="#myCarousel" data-slide="prev" class="carousel-control left">&lsaquo;</a>
    <a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a>
</div><br/><h2 align="center">V4官方示例</h2><hr>
<div class="container">
    <div class="row">
        <#list posts.content as post>
            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="screenshots/album.png">
                    <div class="caption">
                        <h3>${post.postTitle!}</h3>
                        <p>${post.postSummary!}</p>
                        <p><a href="${options.blog_url!}/archives/${post.postUrl}" target="" class="btn btn-success">详情</a></p>
                    </div>
                </div>
            </div>
        </#list>
             <#if posts.totalPages gt 1>
                <div class="pagination">
                    <ul class="clearfix">
                        <#if posts.hasPrevious()>
                            <#if posts.number == 1>
                                <li class="pre pagbuttons">
                                    <a class="btn" role="navigation" href="${options.blog_url!}/">上一页</a>
                                </li>
                            <#else >
                                <li class="pre pagbuttons">
                                    <a class="btn" role="navigation" href="${options.blog_url!}/page/${posts.number}">上一页</a>
                                </li>
                            </#if>
                        </#if>
                        <#if posts.hasNext()>
                        <li class="next pagbuttons">
                            <a class="btn" role="navigation" href="${options.blog_url!}/page/${posts.number+2}">下一页</a>
                        </li>
                        </#if>
                    </ul>
                </div>
             </#if>
    </div>
    <#--<a href="#" class="button button-block button-rounded button-border button-primary button-small"><i class="glyphicon glyphicon-th"></i>&nbsp;加载更多</a><br/>-->
    <!-- 面板组 -->
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        第 1 部分
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    描述文字描述文字描述文字描述文字
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion"
                       href="#collapseTwo">
                        第 2 部分
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    描述文字描述文字描述文字描述文字
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion"  href="#collapseThree">
                        第 3 部分
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    描述文字描述文字描述文字描述文字<br/>
                    描述文字描述文字描述文字描述文字<br/>
                    描述文字描述文字描述文字描述文字<br/>
                    描述文字描述文字描述文字描述文字<br/>
                    描述文字描述文字描述文字描述文字<br/>
                </div>
            </div>
        </div>
    </div>
</div>

<#--脚部-->
<@footer></@footer>
